<template>
    <div class="article-container">
        <!-- 文章内容（单篇，直接通过 v-if 判断是否存在） -->
        <div v-for="(articleItem, index) in article" :key="index" class="article-item">
            <div class="article-info">
                <h2 class="article-title">{{ articleItem.title }}</h2>
                <p class="article-author">作者: {{ articleItem.author }}</p>
                <p class="article-time">{{ articleItem.publish_time }}</p>
                <p>{{ articleItem.text }}</p>
            </div>
            <div class="article-stats">
                <span class="stat-item"><el-icon>
                        <View />
                    </el-icon> {{ articleItem.read_count }}</span>
                <span class="stat-item"><el-icon>
                        <ChatDotSquare />
                    </el-icon> {{ articleItem.comment_count }}</span>
                <span class="stat-item"><el-icon>
                        <StarFilled />
                    </el-icon> {{ articleItem.like_count }}</span>
            </div>
            <!-- 评论 -->
            <div class="comment-container">
                <p class="comment-count">评论 {{ articleItem.comment_count }}</p>
                <el-input v-model="commentContent" placeholder="说点什么吧..." class="comment-input"
                    prefix-icon="el-icon-user" :suffix-icon="suffixIcons" @click:suffix="handleSuffixClick">
                    <template #prepend>
                        <el-avatar :src="articleItem.cover_img"></el-avatar>
                    </template>
                    <template #append>
                        <el-button type="primary" plain @click="submitComment">评论</el-button>
                    </template>
                </el-input>
                <el-text>
                    {{ commentContent}}
                </el-text>
            </div>
            <!-- 标签显示 -->
            <div class="flex gap-2">
                <el-tag v-for="tagId in articleItem.tags" :key="tagId" type="info">
                    {{ getTagName(tagId.name) }} <!-- 使用方法转换 ID 为标签名 -->
                </el-tag>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ShoppingCart, Search } from '@element-plus/icons-vue';
import request from '@/request';
import { useRouter } from 'vue-router';
const router = useRouter()
// 获取文章数据
let article = ref([]);
onMounted(() => {
    request({
        method: 'GET',
        url: 'users/getarticle/'
    }).then(resp => {
        if (Array.isArray(resp.data.article_list)) {
            article.value = resp.data.article_list;
            console.log('文章数据:', resp.data.article_list);
        } else {
            console.error('后端返回的article_list不是数组类型');
        }
    }).catch(error => {
        console.log('文章显示失败', error);
    });
});
// 获取标签列表（用于 ID 转名称）
let tags = ref([]);
// 获取标签数据（如需要 ID 转名称，需确保此请求返回包含名称的标签列表）
onMounted(() => {
    request({
        method: 'GET',
        url: 'users/gettag/',
    }).then(resp => {
        if (Array.isArray(resp.data.tags)) {
            tags.value = resp.data.tags;
            console.log('标签数据:', resp.data.tags);
        } else {
            console.error('后端返回的 tags 不是数组类型');
        }
    }).catch(error => {
        console.log('标签显示失败', error);
    });
});

// 评论
const commentCount = ref(0)
const commentContent = ref('')
const avatarUrl = ref('https://img.icons8.com/?size=512&id=108257&format=png')
const suffixIcons = ref([
    {
        icon: 'el-icon-picture',
        action: 'uploadImage'
    },
    {
        icon: 'el-icon-emoji-expression',
        action: 'insertEmoji'
    }
])

const submitComment = () => {
    console.log(commentContent.value)
}

const handleSuffixClick = (icon) => {
    console.log('点击了', icon.action, '图标')
    // 这里可扩展对应逻辑，比如上传图片、插入表情等实际功能
}
</script>
<style scoped>
/* 搜索区 Flex 布局 */
.article-container {
    height: auto;
    /* 重要：改为自动高度，避免内容被截断 */
    min-height: 200px;
    /* 可选：设置最小高度防止空白 */
    background-color: white;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
}

.article-title {
    color: #333;
    margin-bottom: 0.5rem;
}

.article-author {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0.3rem;
}

.article-time {
    color: #aaa;
}

.article-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: #888;
    margin: 1rem 0;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.flex.gap-2 {
    display: flex;
    gap: 0.5rem;
    /* 调整标签间距 */
    margin: 1rem 0;
}

.loading {
    text-align: center;
    color: #666;
    padding: 20px;
}

/* 评论 */
.comment-container {
    width: 500px;
    margin: 20px auto;
}

.comment-count {
    margin-bottom: 8px;
    font-size: 16px;
}

.comment-input {
    --el-input-bg-color: #f8f9fa;
}

.el-avatar {
    margin-right: 8px;
}
</style>